<template>
  <div class="home">
    <input type="text" v-model="title" /> <button @click="add">添加</button>
    <ul class="nav">
      <li
        v-for="(item, index) in cate"
        :key="index"
        :class="{ bg: flag == index }"
        @click="flag = index"
      >
        {{ item }}
      </li>
    </ul>

    <ul class="con">
      <div>
        <h1>正在看的{{ cate[flag] }}</h1>
        
      </div>
      <li v-for="(item, index) in list" :key="index" v-show="flag == item.cid">
        <input
          v-if="editIndex == index"
          type="text"
          v-model="item.title"
          @keydown.enter="edit(item.title)"
        />
        <span v-else @dblclick="editIndex = index">{{ item.title }}</span
        >
        
        <button @click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 0,
      //点击的tab栏的下标
      editIndex: -1,
      //保存要编辑的数据的下标
      list: [
        { title: "三国演义", id: 1, cid: 0, time: new Date() },
        { title: "太极", id: 2, cid: 1, time: new Date() },
        { title: "王牌对王牌", id: 3, cid: 2, time: new Date() },
        { title: "王者荣耀", id: 4, cid: 3, time: new Date() },
        { title: "NBA", id: 5, cid: 4, time: new Date() },
      ],
      cate: ["书籍", "电影", "综艺", "游戏", "体育"],
      title: "",
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  methods: {
    add() {
      if (this.title == "") {
        alert("不能为空");
        return false;
      }
      //判空
      let arr = this.list.filter((item) => {
        return item.title == this.title;
      });
      if (arr.length > 0) {
        alert("不能重复添加");
        return false;
      }
      //判重
      this.list.unshift({
        id: this.list.length + 1,
        title: this.title,
        cid: this.flag,
        time: new Date(),
      });
      this.title = "";
    },

    remove(i) {
      this.list.splice(i, 1);
    },
    edit(title) {
      if (title == "") {
        alert("不能为空");
        return false;
      }
      this.editIndex = -1;
    },

    sorttime() {
      this.list.sort((a, b) => {
        return new Date(a.time) - new Date(b.time);
      });
      //排序sort会改变原数组
    },
  },
  filters: {
    filtime(val) {
      let time = new Date(val);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDay();

      let hours = time.getHours();
      let minus = time.getMinutes();
      let seconds = time.getSeconds();

      return `${year}-${month}-${day} ${hours}:${minus}:${seconds}`;
    },
  },
  watch: {
    list: {
      handler(newval) {
        localStorage.setItem("list", JSON.stringify(newval));
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.nav {
  display: flex;
  width: 500px;
  margin: 0 auto;
  li {
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    text-align: center;
    flex: 1;
  }
  .bg {
    background: cornflowerblue;
    color: #fff;
  }
}
.con {
  width: 500px;
  border: 1px solid #ccc;
  margin: 0 auto;
  li {
    // display: flex;
    button {
      display: none;
    }
  }
  li:hover {
    background: olivedrab;
    button {
      display: inline-block;
    }
  }
}
</style>
